<template>
  <!-- 我的优惠券 -->
  <div class="myCouponBox">
    <x-header :left-options="{showBack: true,backText:''}" class="headerBox">
      <span>我的优惠券</span>
    </x-header>
    <tab active-color="#f29738">
      <tab-item selected @on-item-click="onItemClick">可用（2）</tab-item>
      <tab-item @on-item-click="onItemClick">使用记录（1）</tab-item>
      <tab-item @on-item-click="onItemClick">过期（3）</tab-item>
    </tab>
    <div class="content">
      <div v-for="(item,index) in couponList" :key="index">
        <div v-if="item.state == 1&&currentIndex == 0" class="couponList flex_sb">
          <div class="coupon-l">
            <div class="coupon-t">
              <div class="moneyBox flex">
                <div class="price">
                  <span>
                    ¥
                    <em>{{item.money}}</em>
                  </span>
                </div>
                <div class="rule wbox-flex">
                  <span>{{item.limit}}</span>
                </div>
              </div>
              <p class="text-clamp2">
                <span class="coupon-type">{{item.title}}</span>
                <span>{{item.classify}}</span>
                {{item.range}}
              </p>
            </div>
            <div class="coupon-b flex_sb">
              <span>{{item.startTime}} - {{item.endTime}}</span>
              <div name="wapwdyhq_none_list_details" class="dire">使用说明</div>
            </div>
          </div>
          <div class="coupon-r">
            <router-link to class="useBtn">立即使用</router-link>
          </div>
        </div>
        <div
          v-if="item.state == 2&&currentIndex == 1"
          class="couponList flex_sb"
          :class="currentIndex!==0?'fillter':''"
        >
          <div class="coupon-l">
            <div class="coupon-t">
              <div class="moneyBox flex">
                <div class="price">
                  <span>
                    ¥
                    <em>{{item.money}}</em>
                  </span>
                </div>
                <div class="rule wbox-flex">
                  <span>{{item.limit}}</span>
                </div>
              </div>
              <p class="text-clamp2">
                <span class="coupon-type">{{item.title}}</span>
                <span>{{item.classify}}</span>
                {{item.range}}
              </p>
            </div>
            <div class="coupon-b flex_sb">
              <span>{{item.startTime}} - {{item.endTime}}</span>
              <div name="wapwdyhq_none_list_details" class="dire">使用说明</div>
            </div>
          </div>
          <div class="coupon-r">
            <img class="gqbg" src="../assets/images/yzy_zhang.51c98fd.png" alt />
          </div>
        </div>
        <div
          v-if="item.state == 3&&currentIndex == 2"
          class="couponList flex_sb"
          :class="currentIndex!==0?'fillter':''"
        >
          <div class="coupon-l">
            <div class="coupon-t">
              <div class="moneyBox flex">
                <div class="price">
                  <span>
                    ¥
                    <em>{{item.money}}</em>
                  </span>
                </div>
                <div class="rule wbox-flex">
                  <span>{{item.limit}}</span>
                </div>
              </div>
              <p class="text-clamp2">
                <span class="coupon-type">{{item.title}}</span>
                <span>{{item.classify}}</span>
                {{item.range}}
              </p>
            </div>
            <div class="coupon-b flex_sb">
              <span>{{item.startTime}} - {{item.endTime}}</span>
              <div name="wapwdyhq_none_list_details" class="dire">使用说明</div>
            </div>
          </div>
          <div class="coupon-r">
            <img class="gqbg" src="../assets/images/ygq_zhang.36c652c.png" alt />
          </div>
        </div>
      </div>
      <div v-if="couponList.length<=0" class="errCont">
        <img class="errImg" src="../assets/images/error_ico3.a00cd87.png" alt />
        <div class="errTitle">暂无优惠券</div>
        <div class="errDesc">您还没有此类优惠券，请领取后再试</div>
      </div>
    </div>
  </div>
</template>

<script>
import { XHeader, Tab, TabItem } from 'vux'

export default {
  components: {
    Tab,
    TabItem,
    XHeader
  },
  data() {
    return {
      currentIndex: 0,
      couponList: [
        {
          id: 1,
          state: 1,
          title: '苏宁国际',
          money: '5',
          limit: '满600用5',
          startTime: '2020.01.13',
          endTime: '2020.03.01',
          classify: '[易券]',
          range: '限HK国际海外专营店'
        },
        {
          id: 2,
          state: 2,
          title: '苏宁国际',
          money: '5',
          limit: '满600用5',
          startTime: '2020.01.13',
          endTime: '2020.03.01',
          classify: '[易券]',
          range: '限HK国际海外专营店'
        },
        {
          id: 3,
          state: 3,
          title: '苏宁国际',
          money: '5',
          limit: '满600用5',
          startTime: '2020.01.13',
          endTime: '2020.03.01',
          classify: '[易券]',
          range: '限HK国际海外专营店'
        },
        {
          id: 4,
          state: 3,
          title: '苏宁国际',
          money: '5',
          limit: '满600用5',
          startTime: '2020.01.13',
          endTime: '2020.03.01',
          classify: '[易券]',
          range: '限HK国际海外专营店'
        },
        {
          id: 5,
          state: 3,
          title: '苏宁国际',
          money: '5',
          limit: '满600用5',
          startTime: '2020.01.13',
          endTime: '2020.03.01',
          classify: '[易券]',
          range: '限HK国际海外专营店'
        },
        {
          id: 6,
          state: 2,
          title: '苏宁国际',
          money: '5',
          limit: '满600用5',
          startTime: '2020.01.13',
          endTime: '2020.03.01',
          classify: '[易券]',
          range: '限HK国际海外专营店'
        }
      ]
    }
  },
  methods: {
    onItemClick(index) {
      this.currentIndex = index
    }
  },
  mounted() {
    document
      .querySelector('body')
      .setAttribute('style', 'background-color:#eee')
  },
  beforeDestroy() {
    document.querySelector('body').removeAttribute('style')
  }
}
</script>

<style lang="less" scoped>
.myCouponBox {
  // 头部导航
  /deep/.headerBox {
    z-index: 9;
    background-color: #fff;
    border-bottom: 2px solid #eee;
    .vux-header-left {
      left: 24px;
      .vux-header-back {
        color: #000;
      }
      .left-arrow:before {
        border-color: #000;
      }
    }
    .vux-header-title {
      color: #000;
      margin: 0 100px;
    }
    .headLeft {
      img {
        width: 60px;
        margin-top: -16px;
      }
    }
    .headRight {
      img {
        width: 60px;
        margin-top: -16px;
      }
    }
    .hotHint {
      width: 450px;
      margin-top: 15px;
    }
  }
  .content {
    padding: 20px;
    .couponList {
      position: relative;
      width: 100%;
      height: 200px;
      margin-top: 10px;
      background: url('../assets/images/conponBg.png') no-repeat;
      background-size: cover;
      color: #f60;
      margin-bottom: 20px;
      .coupon-l {
        padding: 20px 0;
        padding-left: 30px;

        position: relative;
        width: 450px;
        height: 150px;
        .coupon-t {
          .moneyBox {
            height: 60px;
            .price {
              span {
                font-size: 40px;
                font-weight: 700;
              }
              em {
                margin-left: 10px;
                font-size: 50px;
                font-weight: 700;
              }
            }
            .rule {
              margin-left: 20px;
            }
          }
          p {
            color: #333;
            font-size: 24px;
            line-height: 1.3;
            overflow: hidden;
            width: 100%;
            text-overflow: ellipsis;
            white-space: nowrap;
            .coupon-type {
              background: #f60;
              color: #fff;
              border-radius: 0.1rem;
              padding: 0 10px;
            }
            span {
              margin-right: 10px;
            }
          }
        }
        .coupon-b {
          width: 100%;
          margin-top: 20px;
          border-top: 2px dashed #ddd;
          bottom: 0;
          font-size: 26px;
          overflow: hidden;
          height: 60px;
          span {
            color: #ddd;
          }
          .dire {
            color: #999;
            font-size: 26px;
            text-align: right;
          }
        }
      }
      .coupon-r {
        width: 180px;
        height: 180px;
        line-height: 180px;
        text-align: center;
        box-sizing: border-box;
        .useBtn {
          display: inline-block;
          width: 80%;
          height: 50px;
          line-height: 50px;
          border: 2px solid #f60;
          color: #f60;
          font-size: 26px;
          border-radius: 30px;
        }
        .gqbg {
          width: 90%;
          height: 90%;
          margin-top: 10px;
        }
      }
    }
    .couponList.fillter {
      filter: grayscale(100%);
    }
  }
  .errCont {
    padding-top: 3rem;
    text-align: center;
    .errImg {
      width: 50%;
    }
    .errTitle {
      font-size: 34px;
      margin-top: 30px;
    }
    .errDesc {
      font-size: 30px;
      margin-top: 30px;
      color: #666;
    }
  }
}
</style>